<template>
    <Pop :show="clocked.popClocked" :is-title="false" :is-close="true" :is-back="false" @close="onClose">
        <div class="ch-box">
            <!-- <div class="t-head c-title-1">已连续签到{{ user.sign.keepSignDays || 0 }}天</div> -->
            <div class="t-head c-title-1">{{ $t("message.clocked.a") }}{{ user.sign?.keepSignDays || 0 }}{{ $t("message.clocked.d") }}</div>
            <!-- <div class="tip c-title-2">连续签到7天即可享受奖励翻倍</div> -->
            <div class="tip c-title-2">{{ $t("message.clocked.b") }}</div>
            <div class="list">
                <div class="item" v-for="(item, i) in user.sign?.missions || []" :key="i" :class="getClass(item, i)">
                    <!-- <div class="tip1 c-title-5">第{{ i + 1 }}天</div> -->
                    <div class="tip1 c-title-5">{{ $t("message.clocked.c") }}{{ i + 1 }}{{ $t("message.clocked.d") }}</div>
                    <img class="img" src="@/assets/cir.png" />
                    <!-- <div class="tip2 c-title-5">+{{ item.energyAmount }}个能量</div> -->
                    <div class="tip2 c-title-4">
                        +<JEnergy :num="item.energyAmount"></JEnergy>
                    </div>
                    <v-btn @click="() => onSign(item)" class="q-btn" rounded="xl" size="small" :color="item.status ? '#787570' : 'primary'" :width="100">{{ getName(item, i) }}</v-btn>
                </div>
            </div>
        </div>
    </Pop>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Pop from "@/components/pop/index.vue";
import { useClocked } from "@/stores/clocked";
import { useUser } from "@/stores/user";
import { toast } from "@/components/toast/toast";
import i18n from "@/locals";
import { SignInSuc , SignIn } from "@/components/y-signIn";
import JEnergy from "@/components/j-energy/index.vue"

// const isRegister = ref(true);
const clocked = useClocked();
const user = useUser();

onMounted(() => {
    // setTimeout(() => {
    //     toast('签到成功')
    // }, 1000);
});

const getClass = (item: any, i: number) => {
    const days = user.sign.keepSignDays;
    if (user.signIn) {
        if (i < days) {
            return "done";
        }
    } else {
        if (i == days) {
            return "now";
        }
    }
    // if (i == days) {
    //     if (use.signIn) {
    //         return "done";
    //     }
    //     return "now";
    // }
    return "wait";
};

const getName = (item: any, i: number) => {
    const key = getClass(item, i);
    const map = {
        // done: "已签到",
        done: i18n.global.t("message.clocked.map.a"),
        // now: "签到",
        now: i18n.global.t("message.clocked.map.b"),
        // wait: "待签到"
        wait: i18n.global.t("message.clocked.map.c")
    };
    return map[key];
};

const onClose = () => {
    clocked.changePopClocked(false);
};

const onSign = async (item: any) => {
    onClose();
    let err = await user.toSign();
    if (err) {
        toast(err);
    } else {
        // toast("签到成功");
        // toast(i18n.global.t("message.CheckIn.f"));
        // SignInSuc(item.energyAmount);
        SignIn.open(item.energyAmount);
        user.getUserInfo();
        user.getEnergyFlow();
        user.getClocked();
        user.getuserEnergyCount();
    }
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
